<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo01-data属性多层级</title>
</head>
<script src="../libs/vue.js"></script>
<body>
    <h1>hhh</h1>
    <div class="app">
      <!-- 多层级属性 也可以。。。但是有些诡异 -->
        {{ d01.d02.d03.message }}

        <div>
          <button v-on:click="update">变化</button>
        </div>
    </div>
</body>
<script>
    Vue.config.productionTip = false;

var app = new Vue({
  el: '.app',
  data: {
    d01:{
      d02:{
        d03:{
          message: 'Hello Vue!222'
        }
      }
    }
  },
  methods:{
    update:function(){
      var ran = Math.random();
      this.d01.d02.d03.message = '发生变化：'+ran;

    }
  },
  watch:{
    /* 这里，直接检测 d01 是不生效的 */
    'd01.d02.d03.message':function(val){
      console.log(val);
    }
  }
});

</script>
</html>